<template>
  <div class="mod-config">
    <div style="margin-bottom: 20px;">
      <el-button type="primary" @click="download()">下载数据</el-button>
      <el-button type="primary" @click="goBack()">返回</el-button>
    </div>
    <div style="margin-bottom: 15px;">所需人数：{{ num }}人</div>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;"
    >
      <el-table-column label="序号" prop="id"></el-table-column>
      <el-table-column label="昵称" prop="nickname"></el-table-column>
      <el-table-column label="头像">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" alt="">
        </template>
      </el-table-column>
      <el-table-column label="手机号" prop="phone"></el-table-column>
      <el-table-column label="微信号" prop="wxNumber"></el-table-column>
      <el-table-column label="二维码">
        <template slot-scope="scope">
          <img :src="scope.row.wxQrcode" alt="">
        </template>
      </el-table-column>
      <el-table-column label="消耗积分" prop="exchangePoint"></el-table-column>
      <el-table-column label="兑换时间" prop="exchangeTime"></el-table-column>
      <el-table-column v-if="type===2" label="竞拍状态">
        <template slot-scope="scope">
          {{ scope.row.exchangeStatus === 0 ? '失败' : '' }}
          {{ scope.row.exchangeStatus === 1 ? '成功 ' : '' }}
          {{ scope.row.exchangeStatus === 2 ? '进行中 ' : '' }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>

  </div>

</template>

<script>
  export default {
    data() {
      return {
        dataForm: {},
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        totalStatistic: {},
        id: '',
        num: '',
        type: ''
      }
    },
    methods: {
      // 获取数据列表
      init(id, num, type) {
        this.id = id
        this.num = num
        this.type = type
        this.getDataList()
      },
      getDataList() {
        this.dataListLoading = true
        this.dataForm.page = this.pageIndex
        this.dataForm.limit = this.pageSize
        this.$http({
          url: this.$http.adornUrl(`/point/groupcollectionactivitylog/list/${this.id}`),
          method: 'get',
          params: this.$http.adornParams(this.dataForm)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      download() {
        this.dataForm.page = this.pageIndex
        this.dataForm.limit = this.pageSize
        this.$http({
          url: this.$http.adornUrl(`/point/groupcollectionactivitylog/download/${this.id}`),
          method: "get",
          params: this.$http.adornParams(this.dataForm),
          headers: {
            "Content-Type": "application/json; application/octet-stream"
          },
          responseType: "arraybuffer"
        }).then(({ data }) => {
          const blob = new Blob([data], { type: "application/vnd.ms-excel" });
          const downloadElement = document.createElement("a");
          const href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          downloadElement.download = this.type===2?"竞拍列表.xls":'兑换列表.xls'
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
        });
      },
      goBack() {
        this.$emit('goBack')
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      }
    }
  }
</script>
<style scoped>
  img{
    width: 50px;
  }
</style>
